<template>
    <topHeader :title="'登录'" :color="'#4a92ff'" :background="'#fff'" :back="true"></topHeader>
    <view class="loginView">
        <h1 class="title">订单售后</h1>
        <input class="input" type="text" value="" placeholder="请输入手机号" />
        <input class="input" type="text" placeholder="请输入密码" />
        <button open-type="getPhoneNumber" class="login_button" @getphonenumber="loginGET" v-show="!logged">登录小程序</button>
        <view class="once" @click="goBackFn">暂不登录</view>
        <view class="deal">
            <label class="radio" @click="radioFn">
                <radio :checked="dealdata" class="info" />
                <text>若你手机号未注册,登陆时将自动注册,且代表您同意</text>
            </label>
            <text class="deal-t">
                《用户服务协议》
                <text>和</text>
                《隐私权政策》
            </text>
        </view>
    </view>
    <!--    <view class="userinfo" v-if="isUserInfo">
        <view class="user_box">
            <view class="top">获取信息</view>
            <view class="content">是否允许获取您的微信昵称</view>
            <view class="bot">
                <view class="" @click="isUserInfo = false">不获取</view>
                <button class="open_get" open-type="getUserInfo" @getuserinfo="onGetUserInfo">获取</button>
            </view>
        </view>
    </view> -->
</template>

<script setup>
import topHeader from '@/pages/components/topHeader.vue';
import { ref, nextTick } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const dealdata = ref(false); //单选checked
const isUserInfo = ref(false); //单选checked
const ass_token = ref('');
// 单选按钮
const radioFn = () => {
    dealdata.value = !dealdata.value;
};
// 初始化
onLoad(() => {
    userInfo();
    isUserInfo.value = true;
});
const openid = ref();
const session_key = ref();
const phone = ref('');
// 登录==============================================
async function loginFn() {
    const res = await loginUserApi({
        mobile: phone.value,
        openid: openid.value,
        session_key: session_key.value
    });
    if (res.msg == '登录成功') {
        uni.switchTab({
            url: '../../pages/homeView/index'
        });
        uni.setStorageSync('newToken', res.data.token);
    }
}
// ===================================\
// function phonenumberFn(code) {
//     uni.request({
//         // url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${ass_token.value}`, //调用接口  ?access_token=${ass_token.value}`
//         url: `https://scm.wwtscm.com/api/user/getwxmobile`, //调用接口
//         method: 'POST',
//         // header: {
//         //     'content-type': 'application/json'
//         // },
//         data: {
//             code: code //请求体中封装code
//         },
//         success(e) {
//             console.log(e);
//             if (e.data.code === 1) {
//                 phone.value = e.data.data.phone_info.phoneNumber;
//                 uni.setStorageSync('userPhone', e.data.data.phone_info.phoneNumber);
//                 loginFn(); //登录
//             } else {
//                 ass_token.value = '';
//                 assToken(code);
//             }
//         },
//         fail(e) {
//             uni.showModal({
//                 title: '错误!',
//                 content: '网络错误!'
//             });
//         }
//     });
// }
// ===============================
const loginGET = (e) => {
    var detail = e.detail;
    var code = detail.code;
    assToken(code);
};
// 获取openid
const openidFn = async (code) => {
    const res = await openidApi({
        code: code
    });

    openid.value = res.data.openid;
    session_key.value = res.data.session_key;
};
const wxaid = ref();
const wxsetk = ref();
async function getwxdataFn() {
    const res = await getwxdataApi();
    wxaid.value = res.data.appid;
    wxsetk.value = res.data.secret;
}
// 获取access_token&保存
// const assToken = async (code) => {
//     dealdata.value = true;
//     phonenumberFn(code);
// };

function userInfo() {
    uni.login({
        provider: 'weixin',
        success: function (loginRes) {
            openidFn(loginRes.code);
        }
    });
}
// function onGetUserInfo(e) {
//     if (e.detail.userInfo) {
//         uni.setStorageSync('userName', e.detail.userInfo.nickName);
//         uni.setStorageSync('userUrl', e.detail.userInfo.avatarUrl);
//         isUserInfo.value = false;
//         uni.showToast({
//             title: '获取成功',
//             icon: 'none'
//         });
//     } else {
//         uni.showToast({
//             title: '您拒绝了授权',
//             icon: 'none'
//         });
//     }
// }
onShow(() => {
    if (uni.getStorageSync('userName')) {
        userInfo();
    }
});
// 返回首页
function goBackFn() {
    uni.removeStorageSync('newToken');
    uni.removeStorageSync('userName');
    uni.removeStorageSync('userPhone');
    uni.removeStorageSync('userUrl');

    uni.switchTab({
        url: '/pages/homeView/index'
    });
}

//
</script>

<style lang="scss" scoped>
.userinfo {
    width: 1000%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    z-index: 9999;
    .user_box {
        width: 85vw;
        height: 280rpx;
        background-color: #fff;
        margin-top: 40vh;
        margin-left: 8vw;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        .top {
            font-size: 36rpx;
        }
        .content {
            font-size: 28rpx;
        }
        .bot {
            width: 80%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            .open_get {
                margin: 0 !important;
            }
        }
    }
}
.loginView {
    // width: 100%;
    padding: 0 5vw;
    text-align: center;
    .input {
        width: 700rpx;
        height: 80rpx;
        margin: 20rpx auto;
        text-align: left;
    }
    .title {
        font-size: $uni-img-size-base;
        margin-bottom: 10vw;
        margin-top: 30vw;
        font-weight: 700;
    }
    .title-tow {
        font-size: $uni-font-size-lg;
        margin-bottom: 10vw;
    }
    .login_button {
        width: 90vw;
        height: 12vw;
        font-size: $uni-img-size-sm;
        margin-bottom: 3vw;
        padding: 0;
        margin: 0;
        border-radius: 20vw;
        line-height: 12vw;
        color: #fff;
        margin-bottom: 2vw;
        background-color: #2f78ff;
    }
    .deal {
        width: 90vw;
        font-size: $uni-spacing-row-base;
        color: $uni-text-color-placeholder;
        text-align: center;
        .radio {
            radio {
                transform: scale(0.6);
            }
        }
        .deal-t {
            color: $uni-color-primary;
            text {
                color: $uni-text-color-placeholder;
            }
        }
    }
    .once {
        width: 90vw;
        height: 12vw;
        font-size: $uni-img-size-sm;
        margin-bottom: 3vw;
        padding: 0;
        margin: 0;
        line-height: 12vw;
        color: #999;
        margin-bottom: 2vw;
    }
}
</style>